<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleCancel" center width="900px">
    <el-form ref="editFormRef" :model="editForm" :rules="rules" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工单编号" :label-width="labelWidth">
            <el-input v-model="editForm.no" auto-complete="off" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生成时间" :label-width="labelWidth">
            <el-input v-model="editForm.gmtCreated" auto-complete="off" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="工单来源" :label-width="labelWidth">
            <el-select v-model="editForm.paramNo" :disabled="disabled" style="width:100%">
              <el-option
                v-for="item in workOrderParamData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单类型" :label-width="labelWidth">
            <el-input v-model="editForm.typeName" auto-complete="off" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="editForm.paramNo == 100">
        <el-col :span="12">
          <el-form-item label="上报人" :label-width="labelWidth">
            <el-input v-model="editForm.reporterName" auto-complete="off" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
        <!-- 报事报修时呈现 -->
        <el-col :span="12">
          <el-form-item label="手机号" :label-width="labelWidth">
            <el-input v-model="editForm.reporterMobile" auto-complete="off" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 告警派单时呈现 start-->
      <el-row v-else-if="editForm.paramNo == 200">
        <el-col :span="12">
          <el-form-item label="告警设备" :label-width="labelWidth">
            <el-input auto-complete="off" v-model="editForm.deviceName" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备编号" :label-width="labelWidth">
            <el-input v-model="editForm.deviceNo" auto-complete="off" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 告警派单时呈现 end-->
      <el-row>
        <el-col :span="12">
          <el-form-item label="紧急程度" :label-width="labelWidth">
            <el-rate v-model="editForm.emergencyLevel" :disabled="disabled"> </el-rate>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="当前状态" :label-width="labelWidth">
            <el-select v-model="editForm.status" :disabled="disabled" style="width:100%">
              <el-option
                v-for="item in workOrderStatusData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!--   -->
      <el-row>
        <el-col :span="12" v-if="editForm.paramNo == 200">
          <el-form-item label="设备类型" :label-width="labelWidth">
            <el-input auto-complete="off" v-model="editForm.deviceType" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单位置" :label-width="labelWidth">
            <el-input v-model="editForm.location" auto-complete="off" :disabled="disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="处理人" :label-width="labelWidth" v-if="editForm.status != 400">
        <div v-if="editForm.handlerNo">
          <el-input v-model="editForm.handlerName" auto-complete="off" :disabled="disabled"></el-input>
        </div>
        <div v-else>
          <el-button type="primary" @click="handleDistributeBtn" size="small">立即派单</el-button>
        </div>
      </el-form-item>
      <el-form-item label="异常描述" :label-width="labelWidth">
        <el-input type="textarea" v-model="editForm.description" auto-complete="off" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="处理反馈" :label-width="labelWidth">
        <el-input type="textarea" v-model="editForm.feedback" auto-complete="off" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="问题定位" :label-width="labelWidth">
        <el-input v-model="editForm.reason" auto-complete="off" :disabled="disabled"></el-input>
      </el-form-item>
      <!-- <el-form-item label="资产编号" :label-width="labelWidth"
        ><el-input v-model="editForm.assetNo" auto-complete="off" :disabled="disabled"></el-input
      ></el-form-item> -->
      <el-form-item label="处理照片" :label-width="labelWidth">
        <viewer :images="editForm.dealImgUrl">
          <img
            v-for="src in editForm.dealImgUrl"
            :key="src"
            :src="src"
            class="img-over"
            style="width: 32px;height: 32px;float:left;cursor: pointer;margin-right:4px"
          />
        </viewer>
      </el-form-item>
      <el-form-item label="工单进程" :label-width="labelWidth">
        <el-steps
          direction="vertical"
          :active="editForm.status === 100 ? 0 : editForm.status === 200 ? 1 : editForm.status === 300 ? 3 : 0"
          :class="editForm.workOrderProcessings ? 'finshSteps' : ''"
          finish-status="success"
        >
          <el-step
            :title="getStatus(item.status)"
            :description="item.time"
            v-for="(item, index) in editForm.workOrderProcessings"
            v-bind:key="index"
          ></el-step>
        </el-steps>
      </el-form-item>
      <div v-if="editForm.status == 300">
        <el-form-item label="完成时间" :label-width="labelWidth">
          <el-input v-model="editForm.finishTime" auto-complete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <div v-if="editForm.paramNo == 100">
          <el-row>
            <el-col :span="12">
              <el-form-item label="满意度" :label-width="labelWidth">
                <el-rate v-model="editForm.satisfaction" :disabled="disabled"> </el-rate>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评价时间" :label-width="labelWidth">
                <el-input v-model="editForm.evaluateTime" auto-complete="off" :disabled="disabled"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="评价内容" :label-width="labelWidth">
            <el-input
              type="textarea"
              rows="4"
              v-model="editForm.evaluateContent"
              auto-complete="off"
              :disabled="disabled"
            ></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <work-order-dispatch-modal ref="WorkOrderDispatchModal" @ok="modalOk"></work-order-dispatch-modal>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import WorkOrderDispatchModal from './WorkOrderDispatchModal'
import { getWorkOrderDetail } from '../js/api'
import pick from 'lodash.pick'
import { USER_INFO, WorkOrderParamData } from '@/views/children/workOrder/js/constants'
// import moment from 'moment'
export default {
  name: 'RoleModal',
  components: { WorkOrderDispatchModal },
  data () {
    return {
      tenantNo: Vue.ls.get(USER_INFO).tenantNo,
      title: '工单详情',
      isAdd: false,
      disabled: false,
      dialogVisible: false,
      labelWidth: '100px',
      editForm: {
        roleNo: ''
      },
      model: {},
      rules: {},
      roleList: [],
      userList: [],
      dealImgUrl: [],
      workOrderParamData: []
    }
  },
  props: {
    workOrderStatusData: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  computed: {},
  filters: {},
  mounted () {
    this.workOrderParamData = WorkOrderParamData
  },
  methods: {
    edit (record) {
      this.dialogVisible = true
      this.disabled = true
      if (record.no) {
        this.getWorkOrderDetail(record)
      }
    },
    async getWorkOrderDetail (row) {
      let res = await getWorkOrderDetail(row.no)
      if (res.code === 0) {
        if (res.data.dealImgUrl) {
          res.data.dealImgUrl = res.data.dealImgUrl.split(';')
          console.log(res.data.dealImgUrl.length)
          for (let i = 0; i < res.data.dealImgUrl.length; i++) {
            if (res.data.dealImgUrl[i] === '') {
              res.data.dealImgUrl.splice(i, 1)
            }
          }
        }
        console.log('3333')
        res.data.paramNo = Number(res.data.paramNo)
        this.model = Object.assign({}, res.data)
        this.$nextTick(() => {
          if (this.model.no) {
            console.log(this.model)
            this.editForm = pick(
              this.model,
              'no',
              'typeNo', // 工单类型编号
              'typeName',
              'appNo', // 应用编号
              'reporterNo', // 上报人编号
              'reporterName', // 上报人名称
              'reporterMobile', // 上报人手机号
              'paramNo', // 工单来源
              'dealImgUrl', // 处理照片
              'status', // 工单状态
              'deviceNo', // 设备编号
              'deviceName', // 设备名称
              'deviceType', // 设备类型
              'location', // 报修位置
              'description', // 异常描述
              'handlerNo', // 处理人编号
              'handlerName', // 处理人名称
              'gmtCreated', // 创建时间
              'finishTime', // 完成时间
              'emergencyLevel', // 紧急程度
              'feedback', // 处理反馈
              'reason', // 问题定位
              'satisfaction', // 满意度
              'evaluateTime', // 评价时间
              'evaluateContent', // 评价内容
              'workOrderProcessings' // 工单进程
              // 'assetNo' // 资产编号
            )
          }
        })
      } else {
        this.$message.error(res.msg)
      }
    },
    handleCancel () {
      this.dialogVisible = false
      this.model = {}
      this.$refs.editFormRef.resetFields()
    },
    handleDistributeBtn () {
      this.$refs.WorkOrderDispatchModal.isDispatch = true
      this.$refs.WorkOrderDispatchModal.dispatch({ no: this.model.no })
    },
    modalOk (data) {
      this.editForm.handlerNo = data.userNo
      this.editForm.handlerName = data.userName
      this.editForm.status = data.status
      this.$emit('ok')
    },
    getStatus (status) {
      // （100：未派单 200:：处理中 300：已完成）
      if (status === 100) return '未派单'
      else if (status === 200) return '处理中'
      else if (status === 300) return '已完成'
      else return ''
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog {
  margin-top: 5vh !important;
}
/deep/ .el-dialog__body {
  padding: 10px 30px 0 30px;
}
.dialog-footer {
  text-align: right;
}

/deep/ .el-rate__item {
  padding-top: 5px;
  .el-rate__icon {
    font-size: 22px;
  }
}
/deep/ .viewer-container {
  z-index: 3000 !important;
}
.finshSteps {
  height: 200px;
}
/deep/ .el-step__icon {
  top: -3px;
}
</style>
